.vp-blog-info-wrapper {
  .sidebar & {
    // hide blogger info in sidebar
    .vp-blogger-info {
      display: none;
    }
  }

  .vp-page & {
    position: sticky;
    top: calc(var(--navbar-height) + 0.75rem);

    flex: 0 0 300px;

    box-sizing: border-box;

    width: 300px;
    height: auto;
    margin-bottom: 0.75rem;
    margin-inline-start: 1rem;

    transition: all 0.3s;

    @media (max-width: hope-config.$tablet) {
      display: none;
    }

    .vp-blogger-info {
      margin-bottom: 16px;
      padding: 8px 0;
      border-radius: 8px;
      box-shadow: 0 1px 3px 1px var(--card-shadow);

      &:hover {
        box-shadow: 0 2px 6px 2px var(--card-shadow);
      }
    }
  }
  .blog-info-box {
    margin: 8px auto;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--bg-color-float);
    box-shadow: 0 1px 3px 1px var(--card-shadow);
    transition: background var(--color-transition),
      box-shadow var(--color-transition);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}